<template>
  <div class="view-content-box">
    <div class="head">
      <div class="title">商户</div>
      <div class="search-box">
        <van-search
          v-model="value"
          show-action
          shape="round"
          background="transparent"
          placeholder="请输入搜索关键词"
        >
          <template #action>
            <div @click="seach">搜索</div>
          </template>
        </van-search>

        <!-- <div>
          <img src="@/assets/">
          <input type="text" v-model:value="">
         <van-field v-model="value" label="文本" placeholder="请输入用户名" />
        </div> -->
      </div>
    </div>
    <div class="d-flex area-box a-center my-24 px-32">
      <img class="address-icon" src="@/assets/home_location.png" alt="" />
      <span class="area">筛选地区</span>
      <div class="area-msg" @click="show = true">
        {{ area || "请选择地区信息" }}
        <img src="@/assets/xia.png" alt="" class="icon" />
      </div>
    </div>
    <LoadList
      ref="loadListRef"
      :query-params="queryParams"
      :loadingData="postAgentShopPage"
      class="view-content"
    >
      <template #list="{ list }">
        <div class="device-list">
          <div
            v-for="(item, index) in list"
            :key="item.id || index"
            @click="toDeviceList(item)"
          >
            <div class="basic-msg">
              <img src="@/assets/home_shanghu.png" alt="" />
              <div class="name flex-1">{{ item.name }}</div>
              <div class="time">绑定时间：{{moment( item.bindTime).format('YYYY-MM-DD') }}</div>
            </div>

            <div class="data-item">
              <div>
                <div class="num">{{ item.deviceNum }}</div>
                <div class="type">设备数量</div>
              </div>
              <div>
                <div class="num">{{ item.orderNum }}</div>
                <div class="type">订单数量</div>
              </div>
              <div>
                <div class="num">{{ item.agentRatio }}</div>
                <div class="type">提成比例</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </LoadList>

    <van-popup v-model:show="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { postMpDeviceStatistics, postAgentShopPage } from "@/api/index";
import { onMounted } from "vue";
import { areaJson as options } from "./data.js";
import moment from "moment";
const router = useRouter();
const detail = ref({});
const area = ref("");
const getStatistics = () => {
  postMpDeviceStatistics().then((res) => {
    console.log(res);
    detail.value = res.data;
  });
};

const toDeviceList = (item) => {
  router.push({
    path: "/device/list",
    query: { id: item.id },
  });
};
const loadListRef = ref(null);
const queryParams = reactive({
  name: "",
  provinceId: "",
  cityId: "",
  areaId: "",
});
const value = ref("");
const show = ref(false);
const cascaderValue = ref("");
const seach = () => {
  queryParams.name = value.value;
  // loadListRef.value.onRefresh();
};
const onFinish = ({ selectedOptions }) => {
  show.value = false;
  area.value = selectedOptions.map((option) => option.text).join("/");
  const list = ["provinceId", "cityId", "areaId"];
  selectedOptions.forEach((item, index) => {
    queryParams[list[index]] = item.value;
  });
  // loadListRef.value.onRefresh();
};

onMounted(() => {
  // getStatistics();
  // getList();
});
</script>

<style lang="less" scoped>
.head {
  width: 100%;
  height: 276px;
  background: url("@/assets/bg1.png") no-repeat center;
  position: relative;
  padding-top: 28px;
  .title {
    font-size: 40px;
    color: #151515;
    font-weight: 600;
    text-align: center;
  }
  .search-box {
    position: absolute;
    bottom: 36px;
    // width: 100%;
    background: #fff;
    border-radius: 50px;
    left: 20px;
    right: 20px;
    :deep(.van-search) {
      padding: 0;
    }
    :deep(.van-search__content) {
      background: #fff;
    }
    :deep(.van-search__action) {
      width: 126px;
      height: 68px;
      margin: 5px;
      border-radius: 50px;
      text-align: center;
      line-height: 68px;
      background: #fedc00;
    }
  }
}
.area-box {
  font-size: 32px;
  color: #151515;
  .area {
    font-weight: 600;
    margin: 0 8px;
  }
}
.address-icon {
  width: 36px;
  height: 36px;
}

.area-msg {
  font-size: 24px;
  color: #151515;
  line-height: 34px;
  display: flex;
  align-items: center;
  margin-left: 10px;
  .icon {
    width: 24px;
    height: 24px;
  }
}

.type-list {
  display: flex;
  gap: 20px;
  > .device-type {
    flex: 1;
    // height: 250px;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    &:first-child {
      background: #b5d4ff;
    }
    &:last-child {
      background: #fedc00;
    }
    .num {
      font-size: 46px;
      font-weight: 600;
      margin-bottom: 24px;
    }
    .type {
      font-size: 30px;
    }
  }
}
.add-btn {
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  color: #000;
  font-size: 32px;
  margin: 30px 0;
}
.device-list {
  display: flex;
  // gap: 20px;
  padding: 0 32px;
  flex-wrap: wrap;
  > div {
    width: 100%;
    color: #969696;
    font-size: 26px;
    background: #fff;
    // border-radius: 10px;
    text-align: center;
    margin-bottom: 24px;
    // padding: 20px 0;
    border-radius: 16px;
    overflow: hidden;

    // &:nth-child(2n + 1) {
    //   margin-right: 30px;
    // }
    img {
      width: 200px;
      height: 120px;
      // background: #ccc;
      // margin-bottom: 20px;
    }
    .name {
      // margin-bottom: 8px;
      flex: 1;
      // max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .code {
      margin-bottom: 10px;
      font-size: 30px;
    }
  }
  .basic-msg {
    height: 94px;
    background: #e9e9e9;
    display: flex;
    align-items: center;
    padding: 0 20px;
    .name {
      text-align: left;
      margin-left: 14px;
      font-size: 32px;
      color: #151515;
      font-weight: 600;
    }
    img {
      width: 48px;
      height: 48px;
    }
    .time {
      font-size: 24px;
      color: #6c6c6c;
    }
  }
  .data-item {
    display: flex;
    align-items: center;
    height: 178px;
    justify-content: space-between;
    padding: 32px;
    .num {
      font-size: 44px;
      color: #151515;
      margin-bottom: 14px;
    }
    .type {
      font-size: 24px;
      color: #6c6c6c;
    }
  }
  .status {
    color: #6a6a6a;
    > .error {
      color: #e55f6a;
    }
  }
  .view {
    color: #000;
    display: flex;
    align-items: center;
    .ri-icon {
      font-size: 20px;
      margin-left: 5px;
    }
  }
}

.use-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  .all-item {
    background: #fffbe0;
    position: relative;
    height: 35px;
    text-align: center;
    .use-item {
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      &.radius {
        border-radius: 0 12px 12px 0;
      }
    }
    &:nth-child(1) {
      .use-item {
        background: #fedc00;
      }
    }
    &:nth-child(2) {
      .use-item {
        background: #f93c31;
      }
    }
    &:nth-child(3) {
      .use-item {
        background: #8dc936;
      }
    }
    span {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 24px;
    }
  }
}
</style>
